Установка скрипта «Отметка о прочитанном материале»

Введение

Благодарим за покупку скрипта! Установка скриптового решения займет некоторое время. Пожалуйста, внимательно читайте инструкции и старайтесь следовать всем рекомендациям.

Первый шаг: загрузка изображений на сайт


Перейдите в Панель управления » Файловый менеджер.
В правом верхнем углу кликните на кнопку "Создать папку", введите название папки js.
Кликните на галочку и ура, мы создали папку с нужным именем!:)

Теперь зайдите в созданную папку и загрузите в эту папку все изображения из папки "скрипты".

Второй шаг: установка кода


Перейдите в Панель управления » Управление дизайном » Контент-модуль: Главная страница и Страница материала и комментариев к нему, после тега </head> разместите код: 
<script src="/js/jquery.cookie.js"></script>
Далее перейдите в вид материала нужного вам модуля и оберните весь код в следующие метки: 
<div class="review-$ID$" id="prews-$ID$">

 ... тут вид материалов ...

</div>
В то место, что выделено красным цветом – должен быть весь код текущего шаблона.
затем в самый низ этого же шаблона разместите: 
<script> 
    if($.cookie('SAVEfrom-$ID$')) { 
	$("#prews-$ID$").addClass('review-materials'); 
    };
    $(".review-$ID$ a").on("click", function() {
	$.cookie('SAVEfrom-$ID$', 'n-$ID$', { expires: 7, path: '/' });
    }); 
</script>
и сохраните изменения.
Перейдите в Панель управления » Управление дизайном » Общие шаблоны: Таблица стилей (CSS), разместите код: 
.review-materials {
    transition: all .15s ease-out;
    -o-transition: all .15s ease-out;
    -ms-transition: all .15s ease-out;
    -moz-transition: all .15s ease-out;
    -webkit-transition: all .15s ease-out;
    opacity: 0.7;
}
.review-materials:hover {
    opacity: 1;
}
.review-materials:before {
    position: absolute;
    background: #fff;
    border: 1px solid #3BC53B;
    content: "ПРОСМОТРЕНО";
    color: #3BC53B;
    font-size: 11pt;
    padding: 6px 13px;
}
и сохраните изменения.